<template>
  <div style="margin: auto"><h1>客户管理</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="name"
        label="客户名称"
        width="300">
    </el-table-column>

    <el-table-column
        prop="user"
        label="负责人"
        width="200">
    </el-table-column>
    <el-table-column
        prop="business"
        label="经营范围"
        width="300">
    </el-table-column>
    <el-table-column
        label="操作"
        width="300">
      <template #default="scope">
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.findVisible=true">查看</el-button>
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.updateVisible=true">修改信息</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <el-button type="primary" @click="this.addVisible=true" style="margin-top: 60px;margin-left: 50px;size: 20px">添加客户
  </el-button>
  <div class="searchDiv">
    <el-row>
      <el-col :span="10">客户名称<input type="text" v-model="findObj.name"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">经营范围<input type="text" v-model="findObj.business"></el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="margin-top: 20px">
        <el-button type="primary" @click="findByItem(1)">搜索</el-button>
      </el-col>
    </el-row>
  </div>


  <el-dialog
      v-model="findVisible"
      title=""
      width="40%"
      center>
    <h1 style="margin-left: 110px">客户信息详情</h1>
    <div style="margin-left: 100px;margin-top: 20px">客户名称:<span style="margin-left: 50px">{{ customer.name }}</span><br>
    </div>
    <div style="margin-left: 100px;margin-top: 20px">负责人:<span style="margin-left: 50px">{{ customer.user }}</span><br>
    </div>
    <div style="margin-left: 100px;margin-top: 20px">负责人电话:<span
        style="margin-left: 50px">{{ customer.phone }}</span><br></div>
    <div style="margin-left: 100px;margin-top: 20px">办公地址:<span
        style="margin-left: 50px">{{ customer.address }}</span><br></div>
    <div style="margin-left: 100px;margin-top: 20px">经营范围:<span
        style="margin-left: 50px">{{ customer.business }}</span><br></div>
    <div style="margin-left: 100px;margin-top: 20px">邮箱:<span
        style="margin-left: 50px">{{ customer.email }}</span><br></div>
    <el-button type="primary" @click="this.findVisible=false" style="margin-top: 30px;margin-left: 50px;size: 20px">确定
    </el-button>
  </el-dialog>
  <el-dialog
      v-model="updateVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 110px">修改客户信息</h1>
    <div style="margin-left: 100px;margin-top: 20px">客户名称:<span style="margin-left: 50px">{{ customer.name }}</span><br>
    </div>
    <div style="margin-left: 100px;margin-top: 20px">负责人:<input type="text" v-model="customer.user"><br></div>
    <div style="margin-left: 100px;margin-top: 20px">负责人电话:<input type="text" v-model="customer.phone"><br></div>
    <div style="margin-left: 100px;margin-top: 20px">办公地址:<span
        style="margin-left: 50px">{{ customer.address }}</span><br></div>
    <div style="margin-left: 100px;margin-top: 20px">经营范围:<input type="text" v-model="customer.business"></div>
    <div style="margin-left: 100px;margin-top: 20px">邮箱:<span
        style="margin-left: 50px">{{ customer.email }}</span><br></div>
    <el-button type="primary" @click="update" style="margin-top: 30px;margin-left: 50px;size: 20px">修改</el-button>
  </el-dialog>
  <el-dialog
      v-model="addVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 110px">添加客户信息</h1>
    <div style="margin-left: 100px;margin-top: 20px">客户名称:<input type="text" v-model="addCustomer.name"><br></div>
    <div style="margin-left: 100px;margin-top: 20px">负责人:<input type="text" v-model="addCustomer.user"><br></div>
    <div style="margin-left: 100px;margin-top: 20px">负责人电话:<input type="text" v-model="addCustomer.phone"><br></div>
    <div style="margin-left: 100px;margin-top: 20px">办公地址:<input type="text" v-model="addCustomer.address"><br></div>
    <div style="margin-left: 100px;margin-top: 20px">经营范围:<input type="text" v-model="addCustomer.business"></div>
    <div style="margin-left: 100px;margin-top: 20px">邮箱:<input type="text" v-model="addCustomer.email"></div>
    <el-button type="primary" @click="add" style="margin-top: 30px;margin-left: 100px;size: 20px">添加</el-button>
  </el-dialog>
  <el-dialog
      v-model="addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutObj: {},
      findObj: {},
      findVisible: false,
      updateVisible: false,
      addVisible: false,
      customer: {},
      addCustomer: {},
      addDiv: false,
    }
  },
  methods: {
    findByItem(pageNo) {
      this.findObj.pageNo = pageNo;
      axios.get("/project/client/findByItem", {params: this.findObj}).then(resp => {
        this.cutObj = resp.data;
      })
    },
    findById(id) {
      axios.get("/project/client/findById", {params: {id}}).then(resp => {
        this.customer = resp.data;
      })
    },
    update() {
      axios.get("/project/client/update", {params: this.customer}).then(resp => {
        if (resp.data == "ok") {
          this.updateVisible = false;
          this.findByItem(1);
        }
      })

    },
    add() {
      axios.get("/project/client/add", {params: this.addCustomer}).then(resp => {
        if (resp.data == "ok") {
          this.addVisible = false;
          this.addDiv = true;
          this.addCustomer = "";
          this.findByItem(1);
        }
      })
    }

  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>
.searchDiv {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 700px;

}

</style>